<template>
  <div class="w-[90%] h-full p-2">
    <el-card shadow="always">
      <template #header>
        <!-- 搜索和新增 -->
        <div class="flex justify-between items-center">
          <div class="flex gap-2">
            <el-select v-model="search.searchName" placeholder="请选择" clearable @change="searchChange">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>

            <el-input
              placeholder="请输入"
              v-model="search.searchStyle"
              clearable
              style="width: 250px"
              @input="searchChange">
              <template #suffix>
                <Search theme="outline" size="16" fill="#bbb" />
              </template>
            </el-input>
          </div>

          <el-button-group>
            <!-- 新增按钮 -->
            <el-button type="primary" @click="addWireVisiable = true">
              <Plus theme="outline" size="18" fill="#fff" class="" />
            </el-button>

            <!-- 批量导入按钮 -->
            <el-button type="primary" @click="addManyData">
              <FileExcel theme="outline" size="18" fill="#fff" class="" />
            </el-button>
          </el-button-group>
        </div>
      </template>

      <!-- 表格 -->
      <el-table :data="res?.data" border class="font-[consolas] text-sm">
        <el-table-column type="index" label="序号" width="80" align="center" />
        <el-table-column prop="wireName" label="名称" width="120" align="center" />
        <el-table-column prop="wireStyle" label="型号" width="" />
        <el-table-column label="自重比载" width="180" align="center">
          <template #default="scope">
            <span class="text-sm font-bold text-gray-500">{{ scope.row.wireWeight }}kg/m</span>
          </template>
        </el-table-column>
        <!-- 破断力 -->
        <el-table-column label="破断力" width="100">
          <template #default="scope">
            <span class="text-sm font-bold text-gray-500">{{ scope.row.wirePower }}kN</span>
          </template>
        </el-table-column>
        <el-table-column prop="remark" label="备注" width="100" />

        <!-- 创建时间 -->
        <el-table-column label="创建时间" width="180" align="right">
          <template #default="scope">
            <span class="text-xs text-gray-500">{{ dayjs(scope.row.createdAt).format('YYYY-M-DD') }}</span>
          </template>
        </el-table-column>

        <!-- 操作 -->
        <el-table-column label="操作" width="200" align="center">
          <template #default="scope">
            <el-button-group>
              <el-button type="primary" size="small"> 编辑 </el-button>
              <el-button type="danger" size="small" @click="delWire(scope.row)"> 删除 </el-button>
            </el-button-group>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination
        size="small"
        background
        @current-change="currentChange"
        layout=" prev, pager, next,total"
        :total="res?.meta.total"
        class="mt-4" />
    </el-card>
  </div>

  <AddWire :visiable="addWireVisiable" @closed="closed" />
</template>

<script setup lang="ts">
import useWire from '@/composables/useWire'
import AddWire from '@/components/dialog/AddWire.vue'
import { FileExcel, Plus, Search } from '@icon-park/vue-next'
import { reactive, ref } from 'vue'
import { dayjs, ElMessage, ElMessageBox } from 'element-plus'
import { readManyWire } from '@/common/readData'
import type { WireModel } from '@/types/model'

const addWireVisiable = ref(false)
const search = reactive({
  searchName: '',
  searchStyle: '',
})
const currentPage = ref(1)

const options = [
  { label: '引绳', value: '引绳' },
  { label: '导线', value: '导线' },
]
const { all, del, res } = useWire()

// 关闭新增对话框
async function closed() {
  addWireVisiable.value = false
  await all({ searchName: search.searchName || '', searchStyle: search.searchStyle, page: currentPage.value })
}

// 删除导线
async function delWire(model: WireModel) {
  await ElMessageBox.confirm(`是否删除型号为${model.wireStyle}的${model.wireName}?`, '警告', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(async () => {
      await del(model.id!)
      ElMessage({
        type: 'success',
        message: '成功删除',
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '删除已取消',
      })
    })
  await all({ searchName: search.searchName || '', searchStyle: search.searchStyle, page: currentPage.value })
}

// 搜索框变化
async function searchChange() {
  await all({ searchName: search.searchName || '', searchStyle: search.searchStyle, page: currentPage.value })
}

// 分页变化
function currentChange(page: number) {
  currentPage.value = page
  all({ searchName: search.searchName || '', searchStyle: search.searchStyle, page })
}

/**
 * 问题：读取数据后页面不更新
 * 原因还是异步的问题，封装读取表格的函数异步还是有问题的。
 */
async function addManyData() {
  await readManyWire()
  await all({ searchName: search.searchName || '', searchStyle: search.searchStyle, page: currentPage.value })
}

all({ searchName: search.searchName || '', searchStyle: search.searchStyle, page: currentPage.value })
</script>

<style></style>
